<template>
  <div>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10,15, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
      layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
 
const props = defineProps(['total'])
const emit = defineEmits(['handleSizeChange','handleCurrentChange'])
const currentPage = ref(1);  //当前页码数哦
const pageSize = ref(15);  //  每页展示的条数
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

const handleSizeChange = (val: number) => { 
  console.log(`${val} items per page`);
  emit('handleSizeChange',val)

};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  emit('handleCurrentChange',val)
};
</script>

<style scoped> 
</style>